<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#B6C4D3', color: '#1A1C1E', padding:'0'}"
      :header-row-style="{ height:'25px'}"
      :cell-class-name="columnStyle"
      :row-style="{ height: '25px' }"
      :cell-style="{ padding: '0px'}"
    >
      <el-table-column prop="date" label></el-table-column>
      <el-table-column prop="Monday" label="周一"></el-table-column>
      <el-table-column prop="Tuesday" label="周二"></el-table-column>
      <el-table-column prop="Wednesday" label="周三"></el-table-column>
      <el-table-column prop="Thursday" label="周四"></el-table-column>
      <el-table-column prop="Friday" label="周五"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "第一节",
          Monday: "",
          Tuesday: "IT项目管理",
          Wednesday: "",
          Thursday: "IT项目管理",
          Friday: "ios开发"
        },
        {
          date: "第二节",
          Monday: "",
          Tuesday: "软件测试",
          Wednesday: "",
          Thursday: "软件测试",
          Friday: ""
        },
        {
          date: "第三节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: ""
        },
        {
          date: "第四节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: ""
        },
        {
          date: "第五节",
          Monday: "",
          Tuesday: "IT项目管理",
          Wednesday: "",
          Thursday: "IT项目管理",
          Friday: "ios开发"
        },
        {
          date: "第六节",
          Monday: "",
          Tuesday: "软件测试",
          Wednesday: "",
          Thursday: "软件测试",
          Friday: ""
        },
        {
          date: "第七节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: ""
        },
        {
          date: "第八节",
          Monday: "",
          Tuesday: "",
          Wednesday: "",
          Thursday: "",
          Friday: ""
        }
      ]
    };
  },
  methods: {
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "addClass";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-table {
  width: 675px !important;
  height: 225px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

}
</style>

<style scoped>
.addClass {
  background: #dce1e6;
  color: #1a1c1e;
  font-weight: 500;
}
</style>
